<template>
    <div>
        <el-dialog title="订单详情" :visible="true" width="800px" :modal-append-to-body="false"
            :close-on-click-modal="false" @close="handleClose">
            <el-form id="forms" ref="forms" :rules="rulesModel" :model="form" label-width="150px">
                <el-form-item label="服务商姓名：">
                    <div style="color: #C0C4CC;">{{ orderInfo.trueName }}</div>
                </el-form-item>
                <el-form-item label="服务商手机：">
                    <div style="color: #C0C4CC;">{{ orderInfo.phone }}</div>
                </el-form-item>
                <el-form-item label="订单金额：">
                    <div style="color: #C0C4CC;">{{ orderInfo.amt }}</div>
                </el-form-item>
                <el-form-item label="类型：">
                    <div style="color: #C0C4CC;">{{ orderInfo.orderTypeStr }}</div>
                </el-form-item>
                <el-form-item label="服务对象姓名：">
                    <div style="color: #C0C4CC;">{{ orderInfo.fromUserName }}</div>
                </el-form-item>
                <el-form-item label="服务对象手机：">
                    <div style="color: #C0C4CC;">{{ orderInfo.fromPhone }}</div>
                </el-form-item>
                <el-form-item label="备注：">
                    <div v-html="orderInfo.orderSource"></div>
                </el-form-item>
                <el-form-item label="凭证：">
                    <el-image style="width: 50px; height: 50px" :src="orderInfo.voucherUrl.split(',')[0]"
                        :preview-src-list="orderInfo.voucherUrl.split(',')" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <!-- <el-button :loading="buttonLoading" type="primary" @click="submit()">确 定</el-button> -->
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { SoFirst } from "@/api/sorder.js";
export default {
    props: {
        orderid: {
            default: 0,
            type: Number
        },
    },
    data() {
        return {
            form: {}, // 详情实体
            rulesModel: {
                coinid: [
                    { required: true, message: '请选择币种', trigger: 'blur' }
                ],
                amount: [
                    { required: true, message: '请输入金额', trigger: 'blur' }
                ]
            },
            buttonLoading: false,
            coinList: [], // 币种列表

            orderInfo: {},
        }
    },

    mounted() {
        this.getData(this.orderid);
    },
    methods: {
        /**关闭弹窗 */
        handleClose() {
            this.$parent.modalStatus = 0
        },
        /**获取订单详情 */
        async getData(id) {
            const { data, msg, success } = await SoFirst({
                orderid: id,
            })
            this.orderInfo = data

        },
        /**（提交） */
        async submit() {
            try {
                try {
                    await this.$refs['forms'].validate()
                } catch (e) {
                    console.log(e)
                    return
                }
                const { success, msg } = await SetBankInfo(this.form)
                if (success) {
                    this.handleClose();
                }
                this.$message({
                    message: msg,
                    type: success ? 'success' : 'error'
                })
            } catch (e) {
                // 取消
                console.log(e)
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
</style>